Imperative / DOM-driven UI

Vanilla JS (Not a framework, I'm just comparing)

Characteristics

• AJAX:

  • fetch()  or XMLHttpRequest  (older API).

• Problems appear as you scale:

  • Multiple endpoints → repeated fetch calls.

  • Multiple components updating DOM → repeated innerHTML  updates.

  • Error handling → repeated try/catch blocks.

  • State management → you must track which component has which data.

  • UI updates tied to async → manually coordinate loading states, spinners, etc.

Examples

• More complex async behavior :

  const widgets = [
    { id: "widget1", url: "/data1" },
    { id: "widget2", url: "/data2" },
    { id: "widget3", url: "/data3" },
  ];
  
  const status = document.getElementById("status");
  
  let completed = 0;
  
  widgets.forEach(w => {
    const el = document.getElementById(w.id);
    el.innerHTML = "Loading...";
  
    fetch(w.url)
      .then(res => {
        if (!res.ok) throw new Error("Network error");
        return res.text();
      })
      .then(html => {
        el.innerHTML = html;
      })
      .catch(err => {
        el.innerHTML = "Error loading widget";
        console.error(err);
      })
      .finally(() => {
        completed++;
        if (completed === widgets.length) {
          status.innerHTML = "Dashboard loaded";
        }
      });
  });
  

JQuery

Characteristics

• AJAX:

  • .ajax() , .get() , .post()  provide AJAX out of the box.

  $.get("/data", function(html) {
    $("#result").html(html);
  });
  

  • Wraps XMLHttpRequest  or fetch internally.

  • Provides cross-browser normalization .

  • Simplifies DOM selection and updates ( $("#id") ).

  • Handles callbacks inline.

  • At scale, it avoids repeated verbose fetch()  + innerHTML  calls.

Backbone

• Library.